<template>
    <s-box title="技术发展历程" initname="c_history">
        <div class="chart-wrap" ref="chart">
        </div>
    </s-box>
</template>
<script>
import delegate from '../js/event.js';
import echarts from "echarts";
import data2 from "./guanxi.json";
import timeshistory from './timehistory.js'
import mixin from '../js/mixin.js';
export default {
    mixins:[mixin],
    data() {
        return {
           data2
        }
    },
    beforeDestroy(){
         // 解除事件绑定
         delegate.$off('s-resize',this._initChart);
         timeshistory.destroyed();
    },
    mounted(){
        this._initMethod();
    },
    methods: {
        _initMethod() {
            delegate.$on('s-search',function(obj){
                console.log(1111111111,obj)
            })
            delegate.$on('s-resize',this._initChart)
        },
        _getTechnologyDevelopmentCours(){
            
            if(!this.navCurrentId) return;
            this.api({
                    url: "newtechanalyse/technologyDevelopmentCours",
                    method: "post",
                    data:`topicId=${this.navCurrentId}`
            }).then(data => {
                let coursedataArr = [];
                data.courses.map(function(course) {
                    var coursedata =  {
                        year: course.publishyear,
                        text: course.title
                    };
                    coursedataArr.push(coursedata);
                });
                var chart = timeshistory.init(this.$refs.chart);
               chart.setOption({
                   year:data.years,
                   data:coursedataArr
               });
              
            })
        },
        _initChart(){
           this.$nextTick(()=>{
            //    var chart = timeshistory.init(this.$refs.chart);
            //    chart.setOption({year:[],data:[]});
           })
           this._getTechnologyDevelopmentCours();
        }
    },
}
</script>
<style lang="scss" scoped>
  .chart-wrap{
      width: 100%;
      height: 320px;
  }
</style>
